<template>
<div>
  <div v-if="charUser.length !== 0" class="chat-all">
    <div class="chat-object">
      <h5 class="description">最近消息</h5>
      <el-divider />
      <div v-for="item in charUser">
        <el-button @click="inChat(item)" class="user-button">
          <el-avatar :size="35" :src="item.users.usersPortrait" class="user-avatar" />
          <div class="user-name-newMsg">
            <h4 class="user-name">
              {{ item.users.usersName }}
            </h4>
            <div class="user-newMsg">
              {{ item.newMessage.substring(0,item.newMessage.lastIndexOf("/")).substring(0,7)+"..." }}
            </div>
          </div>
        </el-button>
      </div>
    </div>
    <div class="chat-content-div">
      <router-view />
      <div class="hint" v-if="disHint === true">快与好友聊天吧</div>
    </div>
  </div>
  <div v-else>
    <el-empty description="暂未有聊天记录哦" />
  </div>
</div>
</template>

<script>
import request from "../../../utils/request";
export default {
  name: "chat",
  data(){
    return{
      disHint:true,
      users:{},
      usersFriend:{
        users:{
          usersId:0,
        }
      },
      charUser:[],
    }
  },
  methods:{
    inChat(item){
      this.$router.push("/messageCenter/chat/"+item.chatKey+"/"+item.users.usersId)
    },
    initChatUser(){
      request.get("/chat/getChatUser/"+this.users.usersId).then(res=>{
        this.charUser=res.data;
      });
    }
  },
  watch:{
    '$route.path': {
      handler(toPath){
        if (toPath !== "/messageCenter/chat"){
          this.disHint=false
        }
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  },
  created() {
    this.users=JSON.parse(localStorage.getItem("userData"))
  },
  mounted() {
    this.initChatUser()
  }
}
</script>

<style lang="scss">
.chat-all{
  height: 100%;

  .chat-object{
    display: inline-block;
    width: 30%;
    height: 100%;
    overflow: scroll;
    .description{
      margin-left: 10px;
      margin-top: 10px
    }
    .user-button{
      width: 100%;

      .user-avatar {
        display: inline-block;
      }
        .user-name-newMsg{
          display: inline-block;
          width: 70%;
          margin-left: 2px;

          .user-name{
            text-align:left
          }

          .user-newMsg{
            margin-top: 2px;
            text-align:left;
          }
        }
      }
    }
  }

  .chat-content-div{
    border-left:2px solid;
    display: inline-block;
    height: 100%;
    width: 69%;
    overflow: auto;

    .hint{
      color: #71ade8;
      font-size: 30px;
      margin: 20%;
    }
}
</style>